<template>
  <div class="change-class body-bg" :class="{noScroll:showPop}">
    <div v-if="!initLoading">
      <!-- top -->
      <van-sticky>
        <div class="top border-bottom" @click="showPop = false">
          <div class="top-items">
            <van-dropdown-menu>
              <van-dropdown-item :value="selectSchool" :options="schoolList" @change="changeScholl" />
            </van-dropdown-menu>
          </div>
          <div class="line"></div>
          <div class="top-items">
            <van-dropdown-menu>
              <van-dropdown-item :value="selectTeacher" :options="teacherList" @change="changeTeacher" />
            </van-dropdown-menu>
          </div>
        </div>
      </van-sticky>
      <!-- content -->
      <ul class="change-content" v-if="list.length">
        <li class="list-item border-bottom" v-for="(item,index) in list" :key="index">
          <p class="title">
            <!-- <span class="class-type">{{item.type ? '全年' : '半年'}}</span> -->
            <span class="class-name overflow-one">{{item.className}}</span>
          </p>
          <p class="class-tips">校区：{{item.address}}</p>
          <p class="class-tips">教练：{{item.teacherName}}</p>
          <p class="class-tips">时间：{{item.dateTime}}</p>
          <p class="class-tips">上课时间：{{item.classTime}}</p>
          <p class="class-tips">课次：{{item.shidaoNum}}/{{item.totalNum}}</p>
          <p class="choose-btn border" @click="selectClass(item.className,item.goods_id,index)">选择</p>
        </li>
        <li v-if="isReachBottom" class="pull-loading"><van-loading type="spinner" size="20px" color="#1989fa" /></li>
        <li v-if="isBottom" class="bottom-line">-- 亲，已经到最后了--</li>
      </ul>
      <div v-else class="empty">
        <img src="/static/images/empty-icon.png" alt="空">
        <p class="empty-tips">暂无数据哦</p>
      </div>
    </div>
    <div v-else class="init-loading"><van-loading type="spinner" color="#1989fa" /></div>
    <!-- pop -->
    <van-popup
      :overlay="true"
      :show="showPop"
      closeable
      position="right"
      custom-style="width:100%"
      @close="onClosePop"
    >
      <selectClass :title="popTitle" :list="popList" :phoneNumber="phoneNumber"></selectClass> 
    </van-popup>
  </div>
</template>

<script>
import store from '@/store/globalStore'
import Ls from '@/utils/storage'
import selectClass from '@/components/changeClassSelect'
export default {
  components: {
    selectClass
  },
  data() {
    return {
      initLoading: true, // 初始加载
      popTitle: "", // 弹窗标题
      showPop: false, // 展示弹窗
      isBottom: false, // 是否加载完全部数据
      isReachBottom: false, // 是否显示加载状态
      curr_page: 1,
      page_size: 10,
      total: "",
      campus_id: "",
      teacher_id: "",
      selectSchool: 1,
      selectTeacher: 'b',
      schoolList: [
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 }
      ],
      teacherList: [
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' }
      ],
      list: [],
      popList: [], // 传递给子组件的list
      selectIndex: -1, // 用于标记选择的课程，区分是否选择了相同课程
      phoneNumber: "", // 校区电话
    }
  },
  onLoad(e) {
    this.phoneNumber = e.tel;
    this.getCampusList();
    this.getGoodsList();
  },
  onShow() {
    this.campus_id = Ls.getItem("childInfor").student_school_id;
  },
  // 下拉刷新
  onPullDownRefresh: function() {
    this.curr_page = 1;
    this.isReachBottom = false;
    this.isBottom = false;
    this.getGoodsList();
  },
  // 上拉加载
  onReachBottom () {
    if(this.isBottom) return;
    this.isReachBottom = true;
    this.getGoodsList();
  },
  methods: {
    // 获取列表
    getGoodsList() {
      wx.showNavigationBarLoading() //在标题栏中显示加载
      if(this.isReachBottom) {
        this.curr_page++;
      }
      this.$fetch.getGoodsList({
        campus_id: this.campus_id,
        teacher_id: this.teacher_id,
        curr_page: this.curr_page,
        page_size: this.page_size
      }).then(res=>{
        wx.hideNavigationBarLoading() //在标题栏中隐藏加载
        wx.stopPullDownRefresh(); //完成停止加载
        this.initLoading = false;
        this.total = res.result.total;
        let len = 0;
        if(this.isReachBottom) {
          this.list = [...this.list, ...res.result.data];
          len = this.list.length;
          if(len >= this.total){
            this.isBottom = true;
          }
          this.isReachBottom = false;
          return
        }
        this.list = res.result.data;
        len = this.list.length;
        if(len >= this.total){
          this.isBottom = true;
        }
      }).catch(err=>{
        this.initLoading = false;
        this.isReachBottom = false;
        wx.hideNavigationBarLoading() //在标题栏中隐藏加载
        wx.stopPullDownRefresh(); //完成停止加载
      })
    },
    // 获取校区列表
    getCampusList() {
      this.$fetch.getCampusList().then(res=>{
        console.log("res")
        console.log(res)
      }).catch(err=>{

      })
    },
    // 选择校区
    changeScholl(e) {
      this.selectSchool = e.mp.detail;
    },
    // 选择教练
    changeTeacher(e) {
      this.selectTeacher = e.mp.detail;
    },
    // 选择课
    selectClass(title,goods_id,i) {
      this.showPop = true;
      this.popTitle = title;
      if(this.selectIndex != i){ // 如果再次选择的课程不是上次选择的课程则更新popList，否则使用上次选择的缓存数据
        this.selectIndex = i;
        this.popList = [];
        this.$fetch.getLessonsList({
          goods_id: goods_id
        }).then(res=>{
          this.popList = res.data;
        }).catch(err=>{

        })
      }
    },
    onClosePop() {
      this.showPop = false;
    }
  },
}
</script>

<style lang="less">
  .change-class{
    .van-ellipsis{
      font-weight: bold;
    }
    .van-dropdown-menu{
      height: 50px !important;
    }
    .van-popup{
      height: calc(~"100vh - 50px");
    }
    .van-popup--right{
      top: calc(~"50vh + 25px") !important;
    }
  }
</style>
<style lang="less" scope>
.change-class{
  width: 100%;
  height: 100vh;
  &.noScroll{
    overflow: hidden;
  }
  // top
  .top{
    width: 100%;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    .top-items{
      width: 49%;
    }
    .line{
      height: 22px;
      position: relative;
      &::after{
        content: "";
        width: 0.5px;
        height: 22px;
        background: #dcdcdc;
        position: absolute;
        left: 0;
      }
    }
  }
  // content
  .change-content{
    width: 100%;
    padding: 0 20px 0 25px;
    box-sizing: border-box;
    background: #fff;
    .list-item{
      width: 100%;
      padding: 10px 0 15px 0;
      overflow: hidden;
      &:last-child{
        border-bottom: 0;
      }
      .title{
        width: 100%;
        overflow: hidden;
        display: flex;
        align-items: center;
        .class-type{
          display: block;
          min-width: 34px; 
          width: 34px;
          height: 18px;
          text-align: center;
          line-height: 18px;
          color: #fff;
          font-size: 12px;
          background:rgba(0,183,238,1);
          border-radius: 3px;
          margin-right: 10px;
        }
        .class-name{
          font-size: 16px;
          color: #333;
          font-weight: bold;
        }
      }
      .class-tips{
        font-size: 13px;
        color: #666;
        margin-top: 10px;
      }
      .choose-btn{
        width: 70px;
        line-height: 30px;
        border-color: #00B7EE;
        border-radius: 3px;
        font-size: 14px;
        color: #00B7EE;
        text-align: center;
        position: relative;
        right: 0;
        float: right;
      }
    }
  }
}
</style>
